<template>
  <el-select
    v-model="knowledgeVal"
    placeholder="请选择知识库类型"
    multiple
    collapse-tags
    collapse-tags-tooltip
    style="width: 100%"
    filterable
    :filter-method="handleGetOptions"
    reserve-keyword
    :loading="searchLoading"
    clearable
  >
    <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>

<script setup lang="ts" name="knowlegeMultiple">
  import { ref, onMounted, watch } from 'vue'
  import _ from 'lodash'

  // 引用工具或组件
  import { knowledgeTypepageSelect } from '../../api/knowledge'

  // 知识库类型下拉对象
  interface KnowledgeTypeOption {
    id: any
    name: string
  }

  // 知识库类型关联对象
  interface KnowledgeTypeVo {
    id: any
    knowledgeTypeId: any
  }

  // 接收父组件参数
  const props = defineProps({
    oldKnowledgeTypeVo: Array<KnowledgeTypeVo>,
  })

  const typeOptions = ref<KnowledgeTypeOption[]>([])
  const knowledgeVal = ref([]) // 知识库选中的数组值
  const searchLoading = ref(false) // 搜索加载动画
  const knowledgeTypeVo = ref<KnowledgeTypeVo[]>([])
  const delRelationIds = ref([]) // 删除的关联对象ID

  // 值回显处理方法
  const handlerShowValue = () => {
    knowledgeVal.value = []
    props.oldKnowledgeTypeVo.forEach((item) => {
      knowledgeVal.value.push(item.knowledgeTypeId)
    })
  }

  // 处理选中的值
  const getKnowledgeSelectVal = () => {
    knowledgeTypeVo.value = []
    if (knowledgeVal.value) {
      knowledgeVal.value.forEach((item) => {
        knowledgeTypeVo.value.push({
          id: '',
          knowledgeTypeId: item,
        })
      })
    }
    if (props.oldKnowledgeTypeVo) {
      knowledgeTypeVo.value.forEach((item) => {
        let id = props.oldKnowledgeTypeVo.filter(
          (f) => f.knowledgeTypeId == item.knowledgeTypeId,
        )[0]?.id
        if (id) {
          item.id = id
        }
      })
    }
    return knowledgeTypeVo
  }

  // 处理删除的值
  const getDeleteKnowledgeSelectVal = () => {
    delRelationIds.value = []
    if (props.oldKnowledgeTypeVo) {
      props.oldKnowledgeTypeVo.forEach((item) => {
        if (knowledgeVal.value.indexOf(item.knowledgeTypeId) === -1) {
          delRelationIds.value.push(item.id)
        }
      })
    }
    return delRelationIds
  }

  // 请求接口
  const requestKnowledgeTypepageSelectApi = async (name: string) => {
    searchLoading.value = true
    typeOptions.value = []
    const res = await knowledgeTypepageSelect({ name: name })
    if (res.data.code === 20000) {
      typeOptions.value = res.data.data.rows
    }
    searchLoading.value = false
  }

  // 获取所属知识库类型下拉选项关键字
  const getOptionsKeyword = ref('')

  /**
   * 获取所属知识库类型下拉选项
   * @param {string} keyword 关键字
   */
  const handleGetOptions = _.throttle((keyword: string) => {
    if (getOptionsKeyword.value !== keyword) {
      getOptionsKeyword.value = keyword
      requestKnowledgeTypepageSelectApi(keyword)
    }
  }, 500)

  onMounted(() => {
    requestKnowledgeTypepageSelectApi('')
  })

  // 监听父组件传值
  watch(
    () => props.oldKnowledgeTypeVo,
    () => {
      handlerShowValue()
    },
  )

  defineExpose({
    getKnowledgeSelectVal,
    getDeleteKnowledgeSelectVal,
  })
</script>
